<template>
    <!-- 共享单车管理 -->
    <div class="box">
        <div class="tops">
            <div style=" width: 20%;height: 100%; font-size: 17px;margin: 0.75% 0 0 1%;">
                <i class="el-icon-s-home"></i>
                <span>首页</span>
                <span>></span>
                <span>共享单车管理</span>
            </div>
            <div style="float: right; margin: 0.5% 1% 0 0;">
                <el-button @click="addbikeBtn('添加')" type="primary" icon="el-icon-plus" size="small">添加</el-button>
                <el-button @click="deletes" type="primary" icon="el-icon-delete" size="small">删除</el-button>
                <el-button @click="bigdeletes('删除')" type="primary" icon="el-icon-delete" size="small">精确删除</el-button>
                <el-button @click="refresh" type="primary" icon="el-icon-refresh" size="small">刷新</el-button>
                <!-- <el-button type="primary" icon="el-icon-folder-opened" size="small">导出</el-button> -->
            </div>
            <el-dialog :visible.sync="addbikedialogVisible" width="80%" style="margin-top: -8vh;">
                <div class="map" id="container" v-loading="loading" element-loading-text="拼命加载中啊！"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 1)">
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="addbikedialogVisible = false" size="small">关闭</el-button>
                </div>
            </el-dialog>
            <el-dialog title="提示" :visible.sync="showaddbikedialogVisible" width="30%" style="margin-top: 10vh;">
                <span>是否在此添加单车！</span>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="showaddbikedialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="showaddbike">确认</el-button>
                </span>
            </el-dialog>
            <el-dialog title="提示" :visible.sync="deletebikedialogVisible" width="30%" style="margin-top: 10vh;">
                <span>是否删除此单车！</span>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="deletebikedialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="showdeletebike">确认</el-button>
                </span>
            </el-dialog>
        </div>
        <el-container>
            <el-header>
                <el-form label-width="120px" v-model="searchModel">
                    <el-row type="flex" :gutter="0" justify="start" align="top">
                        <el-col :span="6" style="margin-left: 20%;">
                            <el-form-item label="自行车编号">
                                <el-input v-model="searchModel.bikeId" placeholder="请输入自行车编号" size="medium" clearable
                                    filterable ref="optionsCompany">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3" style="margin: 0.3% 0 0 20%;">
                            <el-button @click="queryForm" type="primary" size="small">查询</el-button>
                            <el-button @click="resetForm" size="small">重置</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </el-header>
            <el-container>
                <el-aside>
                    <el-menu default-active="1-1" class="el-menu-vertical" @open="handleOpen" @close="handleClose"
                        @select="selects" :collapse="isCollapse">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-setting"></i>
                                <span slot="title">单车状态</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1">全部</el-menu-item>
                                <el-menu-item index="1-2">租借中</el-menu-item>
                                <el-menu-item index="1-3">空闲中</el-menu-item>
                                <el-menu-item index="1-4">损坏</el-menu-item>
                                <el-menu-item index="1-5">维修中</el-menu-item>
                                <el-menu-item index="1-6">报废</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                    <div @click="shrinkMenu" class="shrink">
                        <i :class="isCollapse ? 'el-icon-arrow-right': 'el-icon-arrow-left'"></i>
                    </div>
                </el-aside>

                <el-main>
                    <el-table ref="multipleTable"
                        :data="tableData.slice((pageInfo.page-1)*pageInfo.pageSize,pageInfo.page*pageInfo.pageSize)"
                        tooltip-effect="dark" style="width: 100%" border height="93.5%"
                        :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}"
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" fixed="left" />
                        <el-table-column type="index" width="50" label="序号" />
                        <el-table-column prop="bikeId" label="自行车编号" :show-overflow-tooltip="true" />
                        <el-table-column label="单车状态">
                            <template slot-scope="scope">
                                <span  v-if="scope.row.bikeType == '报废'" @click="handleClick(scope.row)" style="color: rgb(231, 16, 16); cursor: pointer;">
                                    {{scope.row.bikeType}}</span>
                                <span v-else-if="scope.row.bikeType == '租借中'" style="color: #409EFF;">
                                    {{scope.row.bikeType}}</span>
                                <span v-else-if="scope.row.bikeType == '损坏' || scope.row.bikeType == '维修中'"
                                    @click="handleClick(scope.row)" style="color: rgb(252, 244, 21); cursor: pointer;">
                                    {{scope.row.bikeType}}</span>
                                <span v-else style="color: #2cca3c;"> {{scope.row.bikeType}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="startTime" label="租借时间" :show-overflow-tooltip="true" />
                        <el-table-column prop="endTime" label="归还时间" :show-overflow-tooltip="true" />
                        <el-table-column label="操作" width="160" fixed="right">
                            <template slot-scope="scope">
                                <el-dropdown split-button size="mini">
                                    <span @click="handleClick(scope.row)" style="color:#409EFF ;">查看</span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item>
                                            <span @click="edit(scope.row)" v-if="scope.row.bikeType == '损坏' || scope.row.bikeType == '维修中'|| scope.row.bikeType == '报废'" style="color:#409EFF ;">编辑</span>
                                        </el-dropdown-item>
                                        <el-dropdown-item>
                                            <span @click="deleteone(scope.row)" style="color:#ff4040 ;">删除</span>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="this.pageInfo.page" :page-sizes="[10, 20, 30, 50]"
                        :page-size="this.pageInfo.pageSize" layout="->,total, sizes, prev, pager, next, jumper"
                        :total="this.pageInfo.total">
                    </el-pagination>
                    <!-- 查看弹窗框 -->
                    <el-dialog title="单车信息" :visible.sync="dialogVisible" width="50%" style="margin-top: 5vh;">
                        <el-descriptions title="" direction="horizontal" :column="2" border :contentStyle="rowCenter"
                            :labelStyle="rowCenter">
                            <el-descriptions-item label="自行车编号">{{editData.bikeId}}</el-descriptions-item>
                            <el-descriptions-item label="单车状态">{{editData.bikeType}}</el-descriptions-item>
                            <el-descriptions-item label="租借时间">{{editData.startTime}}</el-descriptions-item>
                            <el-descriptions-item label="归还时间">{{editData.endTime}}</el-descriptions-item>
                            <el-descriptions-item label="故障类型" v-if="editData.bikeType == '损坏' || editData.bikeType == '维修中'|| editData.bikeType == '报废' ">{{editData.breakType}}
                            </el-descriptions-item>
                            <el-descriptions-item label="单车图片" v-if="editData.bikeType == '损坏' || editData.bikeType == '维修中'|| editData.bikeType == '报废'">
                                <img :src="editData.bikepic" width="320" height="240" alt="">
                            </el-descriptions-item>
                        </el-descriptions>
                        <div slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="dialogVisible = false" size="small">关闭</el-button>
                        </div>
                    </el-dialog>
                    <!-- 编辑弹窗框 -->
                    <el-dialog title="单车信息" :visible.sync="dialogVisible2" width="50%" style="margin-top: -5vh;">
                        <el-descriptions title="" direction="horizontal" :column="2" border :contentStyle="rowCenter"
                            :labelStyle="rowCenter">
                            <el-descriptions-item label="自行车编号">
                                <el-input v-model="editData.bikeId" autocomplete="off"></el-input>
                            </el-descriptions-item>
                            <el-descriptions-item label="单车状态">
                                <el-select v-model="editData.bikeType" placeholder="请选择">
                                    <el-option label="租借中" value="租借中"></el-option>
                                    <el-option label="空闲中" value="空闲中"></el-option>
                                    <el-option label="损坏" value="损坏"></el-option>
                                    <el-option label="维修中" value="维修中"></el-option>
                                    <el-option label="报废" value="报废"></el-option>
                                </el-select>
                            </el-descriptions-item>
                            <el-descriptions-item label="租借时间">
                                <el-date-picker v-model="editData.startTime" value-format="yyyy-MM-dd" type="date"
                                    placeholder="注册日期">
                                </el-date-picker>
                            </el-descriptions-item>
                            <el-descriptions-item label="归还时间">
                                <el-date-picker v-model="editData.endTime" value-format="yyyy-MM-dd" type="date"
                                    placeholder="注册日期">
                                </el-date-picker>
                            </el-descriptions-item>
                            <el-descriptions-item label="单车维护图片" v-if="editData.bikeType == '损坏' || editData.bikeType == '维修中'|| editData.bikeType == '报废'">
                                <el-avatar class="the_img" v-if="this.breakBikeData.bikepic" shape="square"
                                    :src="breakBikeData.bikepic">
                                </el-avatar>
                                <el-avatar class="the_img" v-else shape="square"></el-avatar>
                                <input type="file" accept="image/*" style="display: none" ref="iptRef"
                                    @change="onFileChange" />
                                <div class="btn-box">
                                    <el-button type="primary" @click="chooseImg">上传图片</el-button>
                                </div>
                            </el-descriptions-item>
                        </el-descriptions>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible2 = false">取 消</el-button>
                            <el-button type="primary" @click="showbreakbike">确 定</el-button>
                        </div>
                    </el-dialog>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
    import { bikeDataAPI, deletebikeAPI, addbikeAPI, breakBikeAPI, serviceBikeAPI } from "@/api";
    import toumingbicks from '../../assets/bike2.png'
    export default {
        data() {
            return {
                breakBikeData: {
                    bikeType: '',
                    bikeId: '',
                    bikepic: '',
                    breakType: ''
                },
                bikeDataId: '',
                deletebikedialogVisible: false,
                mapvalues: '',
                showaddbikedialogVisible: false,
                addbikeData: {
                    bikeType: '空闲中', lng: '', lat: ''
                },
                loading: true,
                maptimer: '',
                delmaptimer: '',
                addbikedialogVisible: false,
                tableData: [],
                idData: [],
                imageUrl: '',
                rowCenter: {
                    "text-align": "center"
                },
                presentLabelWidth: '100px',
                formLabelWidth: '80px',
                dialogVisible4: false,
                dialogVisible3: false,
                dialogVisible2: false,
                dialogVisible: false,
                isCollapse: false,
                searchModel: { bikeId: '' },
                editData: { bikeType: '', bikeId: '', startTime: '', endTime: '', bikepic: '', breakType: '' },
                pageInfo: { page: 1, pageSize: 10, total: 0 },
                tableData: [],
            }
        },
        async created() {
            this.getbike()
        },
        mounted() {

        },
        beforeDestroy() {
            clearInterval(this.maptimer);
            clearInterval(this.delmaptimer);
        },
        methods: {
            async getbike() {
                const { data: res } = await bikeDataAPI();
                if (res.status == 0) {
                    this.tableData = res.data
                    this.pageInfo.total = res.data.length
                }
            },
            //维修单车
            async servicebike() {
                this.breakBikeData.bikeType = this.editData.bikeType
                const { data: res } = await serviceBikeAPI(this.breakBikeData)
                if (res.status == 0) {
                    this.$message.success('更新单车信息成功！')
                    this.getbike()
                    this.dialogVisible2 = false
                }
                console.log(res)
            },
            async showbreakbike() {
                if (this.editData.bikeType == '维修中' || this.editData.bikeType == '报废') {
                    this.servicebike()
                } else {
                    this.breakBikeData.bikeType = this.editData.bikeType
                    this.breakBikeData.breakType = '-'
                    // 5. 调用接口, 传递给后台并根据返回结果给用户提示
                    const { data: res } = await breakBikeAPI(this.breakBikeData)
                    if (res.status == 0) {
                        this.$message.success('更新单车信息成功！')
                        this.getbike()
                        this.dialogVisible2 = false
                        this.breakBikeData.bikepic = ''
                    } else {
                        this.$message.error('更新单车信息失败！')
                    }
                }
            },
            // 选择图片->点击事件->让选择框出现
            chooseImg() {
                // 模拟点击行为
                this.$refs.iptRef.click()
            },
            // 在选择框中选择图片后触发的改变事件
            onFileChange(e) {
                // 获取用户选择的文件列表（伪数组）
                const files = e.target.files
                if (files.length === 0) {
                    // 没有选择图片
                    this.breakBikeData.bikepic = ''
                } else {
                    // 选择了图片
                    // 1. 创建 FileReader 对象
                    const fr = new FileReader()
                    // 2. 调用 readAsDataURL 函数，读取文件内容
                    fr.readAsDataURL(files[0])
                    // 3. 监听 fr 的 onload 事件
                    fr.onload = async e => {
                        // 4. 通过 e.target.result 获取到读取的结果，值是字符串（base64 格式的字符串）
                        this.breakBikeData.bikepic = e.target.result
                        console.log(this.breakBikeData)
                    }
                }
            },
            //确认添加单车
            showaddbike() {
                this.addbike()
                this.showaddbikedialogVisible = false
                this.addbikedialogVisible = false
            },
            //添加单车接口
            async addbike() {
                const { data: res } = await addbikeAPI(this.addbikeData);
                if (res.status == 0) {
                    this.$message({
                        showClose: true,
                        message: '添加成功!',
                        type: 'success',
                        offset: 60
                    });
                    this.getbike()
                }
            },
            //添加单车按钮
            addbikeBtn(val) {
                this.mapvalues = val
                console.log(val)
                this.loading = true
                this.getbike()
                this.maptimer = setTimeout(() => {
                    this.getlocation()
                }, 1000)
                this.addbikedialogVisible = true
            },
            addMarker(map, point, data) {  // 创建图标对象  
                var myIcon = new BMap.Icon(toumingbicks, new BMap.Size(23, 25), {
                    anchor: new BMap.Size(10, 25),
                });
                var self = this
                // 创建标注对象并添加到地图   
                var marker = new BMap.Marker(point, { icon: myIcon });
                map.addOverlay(marker);
                //单车点击事件
                marker.addEventListener("click", function (e) {
                    if (self.mapvalues == '删除') {
                        self.bikeDataId = data.bikeId
                        self.deletebikedialogVisible = true
                        console.log(data.bikeId, '1111');
                    }
                })
            },
            getlocation() {
                var map = new BMap.Map("container");
                var point = new BMap.Point(101.72, 26.58);
                //定位
                var self = this
                var geolocation = new BMap.Geolocation();
                geolocation.getCurrentPosition(function (r) {
                    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                        // alert('您的位置：' + r.point.lng + ',' + r.point.lat);
                        // point = new BMap.Point(r.point.lng, r.point.lat);
                        point = new BMap.Point(101.732, 26.573);
                    }
                    else {
                        alert('failed' + this.getStatus());
                    }
                    map.centerAndZoom(point, 17);
                    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
                    var scaleCtrl = new BMap.ScaleControl();  // 添加比例尺控件
                    map.addControl(scaleCtrl);

                    //点击查看位置
                    map.addEventListener('click', function (e) {
                        if (self.mapvalues == '添加') {
                            self.showaddbikedialogVisible = true
                            self.addbikeData.lng = e.Cg.lng
                            self.addbikeData.lat = e.Cg.lat
                            console.log('点击位置经纬度：' + e.Cg.lng + ',' + e.Cg.lat)
                            console.log(self.addbikeData)
                            // alert('点击位置经纬度：' + e.Cg.lng + ',' + e.Cg.lat);
                        }
                    });
                    for (let i = 0; i < self.tableData.length; i++) {
                        let point = new BMap.Point(self.tableData[i].lng, self.tableData[i].lat);
                        self.addMarker(map, point, self.tableData[i])
                    }
                    self.loading = false
                    // 子向父传参，加载界面
                    // var value = false
                    // self.$emit('addTodo', value)
                    // self.addMarker(map, point)
                }, { enableHighAccuracy: true });
            },
            //确认精确删除
            async showdeletebike() {
                const { data: res } = await deletebikeAPI(this.bikeDataId);
                if (res.status == 0) {
                    this.$message({
                        showClose: true,
                        message: '删除成功!',
                        type: 'success',
                        offset: 60
                    });
                    this.getbike()
                    this.deletebikedialogVisible = false
                    this.addbikedialogVisible = false
                } else {
                    this.$message.error('删除失败!');
                }
            },
            //精确删除单车
            bigdeletes(val) {
                this.mapvalues = val
                console.log(val)
                this.loading = true
                this.getbike()
                this.delmaptimer = setTimeout(() => {
                    this.getlocation()
                }, 2000)
                this.addbikedialogVisible = true
            },
            //删除单个
            async deleteone(row) {
                const { data: res } = await deletebikeAPI(row.bikeId);
                if (res.status == 0) {
                    this.$message({
                        showClose: true,
                        message: '删除成功!',
                        type: 'success',
                        offset: 60
                    });
                    this.getbike()
                } else {
                    this.$message.error('删除失败!');
                }
            },
            //批量删除
            async deletes() {
                if (this.idData.length == 0) {
                    this.$message({
                        showClose: true,
                        message: '请选择要删除的数据!',
                        type: 'warning',
                        offset: 60
                    });
                } else {
                    let bikeId = this.idData.join(',')
                    const { data: res } = await deletebikeAPI(bikeId);
                    if (res.status == 0) {
                        this.$message({
                            showClose: true,
                            message: '删除成功!',
                            type: 'success',
                            offset: 60
                        });
                        this.getbike()
                    } else {
                        this.$message.error('删除失败!');
                    }
                }
            },
            //刷新
            async refresh() {
                const { data: res } = await bikeDataAPI();
                if (res.status == 0) {
                    this.tableData = res.data
                    this.pageInfo.total = res.data.length
                    this.$message({
                        showClose: true,
                        message: '刷新成功！',
                        type: 'success',
                        offset: 60
                    });
                } else {
                    this.$message.error('刷新失败!');
                }
            },
            shrinkMenu() {
                this.isCollapse = !this.isCollapse;
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            //编辑
            edit(row) {
                this.breakBikeData.bikeId = row.bikeId
                this.editData.bikeId = row.bikeId
                this.editData.bikeType = row.bikeType
                this.editData.startTime = row.startTime
                this.editData.endTime = row.endTime
                this.editData.bikepic = row.bikepic
                // this.editData.img = row.img
                this.dialogVisible2 = true
            },
            //查看
            handleClick(row) {
                console.log(row)
                this.editData.bikeId = row.bikeId
                this.editData.bikeType = row.bikeType
                this.editData.startTime = row.startTime
                this.editData.endTime = row.endTime
                this.editData.bikepic = row.bikepic
                this.editData.breakType = row.breakType
                this.dialogVisible = true
            },
            async selects(key, keyPath) {
                this.tableData = []
                const { data: res } = await bikeDataAPI();
                if (res.status == 0) {
                    if (key == '1-1') {//全部
                        this.tableData = res.data
                        this.pageInfo.total = res.data.length
                    } else if (key == '1-2') {//租借中
                        res.data.forEach(item => {
                            if (item.bikeType == '租借中') {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.total = this.tableData.length
                    } else if (key == '1-3') {//空闲中
                        res.data.forEach(item => {
                            if (item.bikeType == '空闲中') {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.total = this.tableData.length
                    } else if (key == '1-4') {//损坏
                        res.data.forEach(item => {
                            if (item.bikeType == '损坏') {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.total = this.tableData.length
                    } else if (key == '1-5') {//维修中
                        res.data.forEach(item => {
                            if (item.bikeType == '维修中') {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.total = this.tableData.length
                    } else if (key == '1-6') {//报废
                        res.data.forEach(item => {
                            if (item.bikeType == '报废') {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.total = this.tableData.length
                    }
                }
            },
            //重置
            resetForm() {
                this.searchModel.bikeId = ''
                this.getbike()
            },
            //查询
            async queryForm() {
                this.tableData = []
                const { data: res } = await bikeDataAPI();
                if (res.status == 0) {
                    if (this.searchModel.bikeId !== '') {
                        res.data.forEach(item => {
                            if (item.bikeId == this.searchModel.bikeId) {
                                this.tableData.push(item)
                            }
                        });
                        this.pageInfo.total = this.tableData.length
                    } else {
                        this.tableData = res.data
                        this.pageInfo.total = res.data.length
                    }
                }
            },
            handleSelectionChange(val) {
                this.idData = []
                val.forEach(item => {
                    this.idData.push(item.bikeId)
                })
            },
            handleSizeChange(val) {
                this.pageInfo.pageSize = val
                this.pageInfo.page = 1
            },
            handleCurrentChange(val) {
                this.pageInfo.page = val
            }
        },
    }
</script>
<style scoped>
    /deep/ .el-avatar>img {
        display: block;
        height: 100%;
        width: 100%;
        vertical-align: middle;
    }

    .btn-box {
        /* margin-top: 10px; */
        text-align: center;
    }

    .the_img {
        width: 300px;
        height: 280px;
        /* margin-left: 50px; */
    }

    /deep/ .el-dialog__header {
        padding: 20px 20px 20px 10px;
    }

    /deep/ .BMap_Marker img {
        height: 100% !important;
        width: 100% !important;
    }

    #container {
        border-radius: 10px;
        height: 500px;
        width: 100%;
    }

    /deep/ .el-dialog__footer {
        padding: 10px;
    }

    /deep/ .el-dialog__body {
        padding: 0px 20px;
    }

    .tops>div {
        display: inline-block;
    }

    .box>.el-container {
        padding: 20px !important;
        width: 100% !important;
        height: 93% !important;
    }

    .tops {
        width: 100%;
        height: 7%;
        background-color: #fff;
    }

    .box {
        height: 100%;
        width: 100%;
    }

    .el-menu-item {
        padding-left: 60px !important;
    }

    /deep/ .el-menu-item,
    .el-submenu__title {
        height: 30px !important;
        line-height: 30px !important;
        list-style: none;
    }

    /deep/ .el-menu-item-group__title {
        padding: 0 !important;
    }

    .el-menu {
        height: 100%;
        border-right-width: 0;
    }

    .el-menu-vertical:not(.el-menu--collapse) {
        width: 200px;
    }

    .shrink {
        position: absolute;
        top: 50%;
        right: -25px;
        transform: translateY(-50%);
        width: 23px;
        height: 35px;
        border: 1px solid #b3c0d1;
        background: #b3c0d1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 3px;
        cursor: pointer;
        /* z-index: 9999; */
    }

    .el-aside {
        /* width: 15% !important;
        height: 98%;
        background-color: #fff;*/
        margin: 25px 0 0 0 !important;
        /* 左侧不设置宽度 */
        overflow: visible !important;
        width: auto !important;
        height: 95.6%;
        background: #d3dce6;
        position: relative;
    }

    /* .el-card__body, */
    .el-main {
        padding: 25px 0 0 25px !important;
        height: 100%;
        /* flex关键代码，让右侧占满剩余宽度 */
        flex: 1;
        background: #e9eef3;
        box-sizing: border-box;
    }

    .el-header {
        padding-top: 10px;

        background-color: #fff;
    }

    /* .el-menu--collapse {
        width: 1px !important;
    } */
    .el-container>.el-container {
        height: 80%;
    }

    .el-pagination {
        background-color: white !important;
        /* margin-top: 1% !important; */
        /* float: right; */
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>